<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../../../resources/styles.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="icon" type="image/x-icon" href="../../../resources/favicon.ico">
  <title>Tools Component</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .full-screen {
      width: 100vw;
      height: 100vh;
      position: relative;
      overflow: hidden;
    }
  </style>
</head>
<body>
<div class="full-screen" id="container"></div>
<script type="importmap">
    {
      "imports": {
        "three": "https://unpkg.com/three@0.160.1/build/three.module.js",
        "openbim-components": "../../../resources/openbim-components.js"
      }
    }
</script>
<script type="module">

  // Set up scene (see SimpleScene tutorial)

  import * as THREE from 'three';
  import * as OBC from 'openbim-components';

  const container = document.getElementById('container');

  const components = new OBC.Components();

  components.scene = new OBC.SimpleScene(components);
  components.renderer = new OBC.PostproductionRenderer(components, container);
  components.camera = new OBC.SimpleCamera(components);
  components.raycaster = new OBC.SimpleRaycaster(components);

  components.init();

  components.renderer.postproduction.enabled = true;

  const scene = components.scene.get();

  components.camera.controls.setLookAt(12, 6, 8, 0, 0, -10);

  components.scene.setup();

  const grid = new OBC.SimpleGrid(components, new THREE.Color(0x666666));
  const customEffects = components.renderer.postproduction.customEffects;
  customEffects.excludedMeshes.push(grid.get());

  // Tutorial starts here
  const drawManager = new OBC.DrawManager(components)
  const arrowAnnotation = new OBC.ArrowAnnotation(components)
  const circleAnnotation = new OBC.CircleAnnotation(components)
  const rectangleAnnotation = new OBC.RectangleAnnotation(components)
  const textAnnotation = new OBC.TextAnnotation(components)

  const mainToolbar = new OBC.Toolbar(components)
  mainToolbar.addChild(
    drawManager.uiElement.get("main")
  )

  components.ui.addToolbar(mainToolbar)

</script>
</body>
</html>
